<template>
	<section>
		<!--start content-->
		<div class="content paySerice" res="paySerice">
			<div class="box">
				<div class="pay-name">
				购买服务
			</div>
			<div class="paymodel">
				<div class="paymodel-one">
					<div class="left">
						免费版：10用户
						<span>永久免费</span>
					</div>
					<div class="right">
						<p>到期时间：永久有效</p>
						<p>用户数：10用户</p>
						<p>赠送短信&nbsp;100条&nbsp;免费版不支持短信发送功能</p>
					</div>
				</div>
				<div class="paymodel-two">
					<div class="left">
						免费版：不限用户数
						<span>￥6800<i>/年</i></span>
					</div>
					<div class="right">
						<p>到期时间：1年</p>
						<p>应付金额：<span>￥6800</span></p>
						<p>赠送短信&nbsp;10000条&nbsp;支持短信发送功能</p>
					</div>
				</div>
			</div>
			<div class="pay-money">
				付款
			</div>
			<div class="pay-model">
				<el-radio-group v-model="radio">
				    <el-radio :label="3"><div class="zhifulogo"><img src="../../img/zhifubao.png" /></div></el-radio>
				    <el-radio :label="6"><div class="zhifulogo weixin"><img src="../../img/weixinpay.png" /></div></el-radio>
				    <el-radio :label="9"><span>线下转账</span></el-radio>
  				</el-radio-group>
			</div>
			<div class="tab">
				<div v-if="radio==3">
					<img src="../../img/saoma.png" />
				</div>
				<div v-if="radio==6">
					<img src="../../img/saoma.png" />
				</div>
				<div v-if="radio==9">
					汇款换账号：00000000000000
				</div>
			</div>
			</div>
			
		</div>
		<!--end content-->
		<!--start footer-->
		<!--<footer>
			<div class="main">
				<span class="fl">Copyright © 2015 深圳市铱云云计算有限公司</span>
				<span class="fr">粤ICP备13071670-2</span>
			</div>
		</footer>-->
		<!--end footer-->
	</section>
</template>


<script>
	export default {
	    data() {
	      return {
	      	radio:3
	      }
	    },
	    computed:{

	    },
	    methods:{
	    },
	    watch:{

	    },
//	    components:{dialogBox},
	    mounted(){
			document.querySelector(".paySerice").style.minHeight = (document.documentElement.clientHeight-40) + 'px';
	    },
	    destroyed(){
	    	document.querySelector('body').style.cssText = 'background:#E9ECF3';
	    }
  	}
</script>

<style scoped>
*{
	/*transition:.2s;*/
}
a{
	cursor: pointer;

}
a:hover{
	opacity: .8;
}
.pay-name{
	height: 55px;
	line-height: 55px;
	font-size: 20px;
	border-bottom:1px solid #E0E0E0 ;
}
.content{
	background: #fff;
	padding: 20px;
}
.paymodel{
	margin-top: 25px;
	
}
.paymodel-one{
	overflow: hidden;
}
.paymodel-one .left{
	border: 2px solid #ff7d00 ;
	padding: 25px 38px;
	width: 250px;
	font-size: 14px;
	height: 130px;
	box-sizing: border-box;
	float: left;
	margin-right: 20px;
}
.paymodel-one .left span{
	font-size: 42px;
	color: #ff7d00;
	display: block;
}
.paymodel-one .right{
	float: left;
}
.paymodel-one .right p{
	font-size: 14px;
	line-height: 43px;
}
.paymodel-two {
	clear: both;
	margin-top: 25px;
	overflow: hidden;
}
.paymodel-two .left{
	border: 2px solid #ff7d00 ;
	padding: 25px 38px;
	width: 250px;
	font-size: 14px;
	height: 130px;
	box-sizing: border-box;
	float: left;
	margin-right: 20px;
}
.paymodel-two .left span{
	font-size: 42px;
	color: #ff7d00;
	display: block;
}
.paymodel-two .left span i{
	font-size: 14px;
}
.paymodel-two .right{
	float: left;
}
.paymodel-two .right p{
	font-size: 14px;
	line-height: 43px;
}
.paymodel-two .right p span{
	font-size: 18px;
	color: #ff7d00;
	position: relative;
	top: 2px;
}
.pay-money{
	font-size: 20px;
	height: 80px;
	line-height: 80px;
	margin-top: 30px;
	position: relative;
}
.pay-model {
	margin-left: 50px;
}
.pay-model img{
	position: relative;
	top: -30px;
	margin: 0 25px;
	margin-right: 10px;
	display: block;
}
.pay-model span{
	display: inline-block;
	
}
.tab div{
	margin: 50px 120px;
	
}
.tab div img{
	width: 130px;
}
.box{
	width: 557px;
	margin: 0 auto;
}
.zhifulogo{
	width: 160px;height: 0;display: inline-block;margin-left: -18px;
}
.pay-model .weixin{
	width: 180px;
}
.pay-model .weixin img{
	top: -27px;
}
.pay-model span{
	margin-left: 10px;
}
</style>
